<template>
    <div class="app-container">
      <div class="container_box">
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="12">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
              <el-row>
                <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="費用編碼" prop="costCode">
                    <el-input
                      v-model="form.costCode"
                      placeholder="請輸入費用編碼"
                    />
                  </el-form-item>
                </el-col> -->
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="費用標題" prop="costTitle">
                    <el-input
                      v-model="form.costTitle"
                      placeholder="請輸入費用標題"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="費用來源" prop="costSource">
                    <el-select
                      style="width: 100%"
                      v-model="form.costSource"
                      @change="change_costSource"
                      placeholder="請選擇費用來源"
                    >
                      <el-option
                        v-for="dict in dict.type.cost_source"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="支出賬號" prop="costBankNo">
                    <el-input
                      disabled
                      v-model="form.costBankNo"
                      placeholder="請選擇支出賬號"
                    >
                      <el-button
                        slot="append"
                        @click="open_dialog"
                        icon="el-icon-search"
                      ></el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
  
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="支出銀行" prop="costBankName">
                    <el-input
                      disabled
                      v-model="form.costBankName"
                      placeholder="請輸入支出銀行"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <!-- 收款人信息 -->
                <!-- supplierName 收款人姓名 銀行賬號自選 -->
  
                <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="稅金" prop="taxAmount">
                    <el-input v-model="form.taxAmount" placeholder="請輸入稅金" />
                  </el-form-item>
                </el-col> -->
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="支出賬戶" prop="costBankAccount">
                    <el-input
                      disabled
                      v-model="form.costBankAccount"
                      placeholder="請輸入支出賬戶"
                    />
                  </el-form-item>
                </el-col>
                <!-- 
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="支出金額" prop="costTaxAmount">
                    <el-input
                      v-model="form.costTaxAmount"
                      placeholder="請輸入支出金額"
                    />
                  </el-form-item>
                </el-col> -->
              </el-row>
              <el-row>
                <el-col
                  v-if="form.costSource == 30"
                  :xs="24"
                  :sm="12"
                  :md="12"
                  :lg="12"
                  :xl="12"
                >
                  <el-form-item label="收款人姓名" prop="supplierName">
                    <el-input v-model="form.supplierName"> </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
  
              <el-row>
                <el-col
                  v-if="supplier_show"
                  :xs="24"
                  :sm="12"
                  :md="12"
                  :lg="12"
                  :xl="12"
                >
                  <el-form-item label="供應商編碼" prop="supplierCode">
                    <el-input
                      disabled
                      v-model="form.supplierCode"
                      placeholder="請選擇供應商編碼"
                    >
                      <el-button
                        slot="append"
                        @click="open_dialog_supplier"
                        icon="el-icon-search"
                      ></el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="supplier_show"
                  :xs="24"
                  :sm="12"
                  :md="12"
                  :lg="12"
                  :xl="12"
                >
                  <el-form-item label="供應商名稱" prop="supplierName">
                    <el-input
                      disabled
                      v-model="form.supplierName"
                      placeholder="請輸入供應商名稱"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="收款賬號" prop="toBankNo">
                    <el-input
                      disabled
                      v-model="form.toBankNo"
                      placeholder="請選擇收款賬號"
                    >
                      <el-button
                        slot="append"
                        @click="open_dialog_to"
                        icon="el-icon-search"
                      ></el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="收款銀行" prop="toBankName">
                    <el-input
                      disabled
                      v-model="form.toBankName"
                      placeholder="請輸入收款銀行"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="收款賬戶" prop="toBankAccount">
                    <el-input
                      disabled
                      v-model="form.toBankAccount"
                      placeholder="請輸入收款賬戶"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="經辦人" prop="operatorName">
                    <el-input
                      disabled
                      v-model="form.operatorName"
                      placeholder="請輸入經辦人"
                    >
                      <el-button
                        slot="append"
                        @click="open_dialog_receiverName"
                        icon="el-icon-search"
                      ></el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="提交時間" prop="submitTime">
                    <el-date-picker
                      style="width: 100%"
                      clearable
                      v-model="form.submitTime"
                      type="datetime"
                      @input="$forceUpdate()"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="請選擇提交時間"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="稅率" prop="taxRate">
                    <el-input
                      maxlength="4"
                      placeholder="請輸入稅率（0-1）"
                      @change="taxRate_change"
                      oninput="value=value.replace(/^0[0-9]|^[2-9]|^1[0-9]|^1\.|[^\d.]/g,'')"
                      v-model="form.taxRate"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="備註" prop="remark">
                    <el-input v-model="form.remark" placeholder="請輸入備註" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-divider content-position="center">費用明細信息</el-divider>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  size="mini"
                  @click="handleAddBizInvoiceItem"
                  >添加</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="handleDeleteBizInvoiceItem"
                  >删除</el-button
                >
              </el-col>
            </el-row>
  
            <el-table
              style="width: 100%"
              :data="bizCostItemList"
              :row-class-name="rowItemIndex"
              :row-key="
                (row) => {
                  return row.index;
                }
              "
              @selection-change="SelectionChange"
              ref="bizCustomerReservationItem"
            >
              <el-table-column type="selection" width="50" align="center" />
              <el-table-column
                label="序號"
                align="center"
                prop="index"
                width="50"
              />
              <el-table-column label="費用事項" prop="costItem" width="150">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.costItem"
                    placeholder="請選擇預約事項"
                    clearable
                  >
                    <el-option
                      v-for="dict in dict.type.cost_scope"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="費用金額" align="center" prop="costAmount">
                <template slot-scope="scope">
                  <el-input
                    min="0"
                    @change="amountSum(scope.row)"
                    v-model="scope.row.costAmount"
                    placeholder="請輸入費用金額"
                  />
                </template>
              </el-table-column>
              <el-table-column label="備註" prop="remark">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.remark" placeholder="請輸入備註" />
                </template>
              </el-table-column>
              <el-table-column label="稅金" align="center" prop="taxAmount">
                <template slot-scope="scope">
                  <span v-if="scope.row.costAmount">{{
                    scope.row.taxAmount
                  }}</span>
                  <span v-else>0</span>
                </template>
              </el-table-column>
              <el-table-column
                label="費用含稅金額"
                align="center"
                prop="costTaxAmount"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.costAmount">{{
                    scope.row.costTaxAmount
                  }}</span>
                  <span v-else>0</span>
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align: center; margin-top: 16px">
              <el-button type="primary" @click="submitForm('20')"
                >提 交</el-button
              >
              <el-button type="primary" @click="submitForm('10')"
                >保 存</el-button
              >
              <el-button @click="cancel">取 消</el-button>
            </div>
          </el-col>
        </el-row>
        <!-- 選擇支出銀行 -->
        <el-dialog
          v-if="dialog_if"
          :visible.sync="open"
          destroy-on-close
          :close-on-click-modal="false"
          width="600px"
          append-to-body
        >
          <!-- 单选表格 -->
          <el-table
            v-loading="loading"
            :data="userList"
            class="signType"
            max-height="500"
            ref="multipleTable"
            @selection-change="handleSelectionChange"
            @select="selectTable"
            :row-key="
              (row) => {
                return row.id;
              }
            "
          >
            <el-table-column
              type="selection"
              width="50"
              align="center"
              :reserve-selection="true"
            />
            <el-table-column label="賬戶分類" align="center" prop="bankType">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.bank_type"
                  :value="scope.row.bankType"
                />
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="賬戶名稱"
              align="center"
              prop="accountName"
            />
            <el-table-column
              show-overflow-tooltip
              label="銀行名稱"
              align="center"
              prop="bankName"
            />
            <el-table-column
              show-overflow-tooltip
              label="銀行賬號"
              align="center"
              prop="bankNo"
            />
          </el-table>
          <div class="dialog-footer" style="text-align: center">
            <el-button @click="cancel_customer">取 消</el-button>
            <el-button type="primary" @click="choose_customer">確 定</el-button>
          </div>
        </el-dialog>
  
        <!-- 選擇收款銀行 -->
        <el-dialog
          v-if="dialog_if_to"
          :visible.sync="open_to"
          destroy-on-close
          :close-on-click-modal="false"
          width="600px"
          append-to-body
        >
          <!-- 单选表格 -->
          <el-table
            v-loading="loading"
            :data="userList_to"
            class="signType"
            max-height="500"
            ref="multipleTable_to"
            @selection-change="handleSelectionChange_to"
            @select="selectTable_to"
            :row-key="
              (row) => {
                return row.id;
              }
            "
          >
            <el-table-column
              type="selection"
              width="50"
              align="center"
              :reserve-selection="true"
            />
            <el-table-column label="賬戶分類" align="center" prop="bankType">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.bank_type"
                  :value="scope.row.bankType"
                />
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="賬戶名稱"
              align="center"
              prop="accountName"
            />
            <el-table-column
              show-overflow-tooltip
              label="銀行名稱"
              align="center"
              prop="bankName"
            />
            <el-table-column
              show-overflow-tooltip
              label="銀行賬號"
              align="center"
              prop="bankNo"
            />
          </el-table>
          <div class="dialog-footer" style="text-align: center">
            <el-button @click="cancel_customer_to">取 消</el-button>
            <el-button type="primary" @click="choose_customer_to"
              >確 定</el-button
            >
          </div>
        </el-dialog>
  
        <!-- 選擇供應商 -->
        <el-dialog
          v-if="dialog_if_supplier"
          :visible.sync="open_supplier"
          destroy-on-close
          :close-on-click-modal="false"
          width="600px"
          append-to-body
        >
          <!-- 单选表格 -->
          <el-table
            v-loading="loading"
            :data="userList_supplier"
            class="signType"
            max-height="500"
            ref="multipleTable_supplier"
            @selection-change="handleSelectionChange_supplier"
            @select="selectTable_supplier"
            :row-key="
              (row) => {
                return row.id;
              }
            "
          >
            <el-table-column
              type="selection"
              width="50"
              align="center"
              :reserve-selection="true"
            />
            <el-table-column
              label="供應商編碼"
              align="center"
              prop="supplierCode"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="供應商名稱"
              align="center"
              prop="supplierName"
            />
            <el-table-column
              show-overflow-tooltip
              label="聯繫人"
              align="center"
              prop="contacts"
            />
            <el-table-column
              show-overflow-tooltip
              label="公司地址"
              align="center"
              prop="address"
            />
          </el-table>
          <div class="dialog-footer" style="text-align: center">
            <el-button @click="cancel_customer_supplier">取 消</el-button>
            <el-button type="primary" @click="choose_customer_supplier"
              >確 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 選擇經辦人 -->
        <el-dialog
          v-if="dialog_if_receiverName"
          :visible.sync="open_receiverName"
          destroy-on-close
          :close-on-click-modal="false"
          width="600px"
          append-to-body
        >
          <!-- 单选表格 -->
          <el-table
            v-loading="loading"
            :data="userList_receiverName"
            class="signType"
            max-height="500"
            ref="multipleTable_receiverName"
            @selection-change="handleSelectionChange_receiverName"
            @select="selectTable_receiverName"
            :row-key="
              (row) => {
                return row.id;
              }
            "
          >
            <el-table-column
              type="selection"
              width="50"
              align="center"
              :reserve-selection="true"
            />
            <el-table-column label="姓名" align="center" prop="userName">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="性別"
              align="center"
              prop="sex"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.sys_user_sex"
                  :value="scope.row.sex"
                />
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="聯繫方式"
              align="center"
              prop="phonenumber"
            />
            <el-table-column
              show-overflow-tooltip
              label="郵箱"
              align="center"
              prop="email"
            />
          </el-table>
          <div class="dialog-footer" style="text-align: center">
            <el-button @click="cancel_customer_receiverName">取 消</el-button>
            <el-button type="primary" @click="choose_customer_receiverName"
              >確 定</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
  </template>
        
        <script>
  import {
    getAccountSubjectTree,
    getEntry,
    addEntry,
    updateEntry,
  } from "@/api/biz/entry";
  import {
    listSupplier,
    getSupplier,
    delSupplier,
    addSupplier,
    updateSupplier,
  } from "@/api/biz/supplier";
  import {
    listCost,
    getCost,
    delCost,
    addCost,
    updateCost,
  } from "@/api/biz/cost";
  import {
    listBank,
    getBank,
    delBank,
    addBank,
    updateBank,
  } from "@/api/biz/bank";
  import { listUser } from "@/api/system/user";
  export default {
    name: "costEdit",
    dicts: [
      "cost_source",
      "tax_nature",
      "supplier_service_situation",
      "industry_type",
      "supplier_status",
      "bank_type",
      "payment_status",
      "business_type",
      "business_scope",
      "sys_user_sex",
      "cost_scope",
    ],
    data() {
      return {
        // 表单參數
        form: {
          costSource: "10",
          taxRate: 0,
        },
        supplier_show: true,
        // 表单校验
        rules: {
          email: [
            {
              type: "email",
              message: "請輸入正確的郵箱地址",
              trigger: ["blur", "change"],
            },
          ],
        },
  
        // 是否顯示弹出层
        loading: false,
        open: false,
        dialog_if: false,
        multipleSelection: [],
        select_customer: {},
        userList: [],
  
        open_to: false,
        dialog_if_to: false,
        multipleSelection_to: [],
        select_customer_to: {},
        userList_to: [],
  
        open_supplier: false,
        dialog_if_supplier: false,
        multipleSelection_supplier: [],
        select_customer_supplier: {},
        userList_supplier: [],
  
        open_receiverName: false,
        dialog_if_receiverName: false,
        multipleSelection_receiverName: [],
        select_customer_receiverName: {},
        userList_receiverName: [],
  
        // 費用表格數据
        costList: [],
        // 費用明細表格數据
        accountSubjectArr: [],
        bizCostItemList: [],
        checkedList: [],
      };
    },
    created() {
      if (this.$route.query.id) {
        this.get_detail(this.$route.query.id);
      }
    },
    activated() {
      if (this.$route.query.id) {
        this.get_detail(this.$route.query.id);
      }
    },
    methods: {
      get_detail(id) {
        getCost(id).then((response) => {
          this.form.id = response.data.id;
          this.form.costSource = response.data.costSource;
          switch (response.data.costSource) {
            case "10":
            this.supplier_show = true
              break;
            case "20":
            this.supplier_show = false
              break;
            case "30":
            this.supplier_show = false
             
              break;
            default:
              break;
          }
          this.form.taxRate = response.data.taxRate ? response.data.taxRate : 0;
          this.form.costTitle = response.data.costTitle;
          this.form.toBankId = response.data.toBankId;
          this.form.toBankNo = response.data.toBankNo;
          this.form.toBankName = response.data.toBankName;
          this.form.toBankAccount = response.data.toBankAccount;
          this.form.costBankId = response.data.costBankId;
          this.form.costBankNo = response.data.costBankNo;
          this.form.costBankName = response.data.costBankName;
          this.form.costBankAccount = response.data.costBankAccount;
          this.form.supplierName = response.data.supplierName;
          this.form.submitTime = response.data.submitTime;
          this.form.remark = response.data.remark;
          this.form.supplierCode = response.data.supplierCode;
          this.form.supplierId = response.data.supplierId;
          this.form.taxAmount = response.data.taxAmount;
          this.form.costAmount = response.data.costAmount;
          this.form.costTaxAmount = response.data.costTaxAmount;
          // this.bizCostItemList = response.data.bizCostItemList;
          this.bizCostItemList = [];
          response.data.bizCostItemList.map((item) => {
            let obj = {
              id:item.id,
              costId:item.costId,
              costCode:item.costCode,
              costItem: item.costItem,
              costAmount: item.costAmount,
              taxAmount: item.taxAmount,
              costTaxAmount: item.costTaxAmount,
              tax: item.tax,
              uint: item.uint,
              quantity: item.quantity,
              unitPrice: item.unitPrice,
              remark: item.remark,
              index: item.index,
            };
            this.bizCostItemList.push(obj);
          });
        });
      },
      change_costSource(name) {
        console.log(name);
        this.supplier_show = name == "10" ? true : false;
        this.form.toBankId = "";
        this.form.toBankNo = "";
        this.form.toBankName = "";
        this.form.toBankAccount = "";
      },
      /** 提交按钮 */
      submitForm(type) {
        // 提交時間
        this.form.costStatus = type;
        console.log(this.form);
        console.log(this.bizCostItemList);
        switch (this.form.costSource) {
          case "10":
            break;
          case "20":
            this.form.supplierCode = "";
            this.form.supplierId = "";
            this.form.supplierName = "";
            break;
          case "30":
            this.form.supplierCode = "";
            this.form.supplierId = "";
            break;
          default:
            break;
        }
        this.form.taxAmount = 0; //稅金
        this.form.costAmount = 0; //報價金額
        this.form.costTaxAmount = 0; // 含稅報價
        this.bizCostItemList.map((item) => {
          item.unitPrice = item.costAmount;
          this.form.costAmount += item.costAmount - 0;
          this.form.taxAmount += item.taxAmount - 0;
          this.form.costTaxAmount += item.costTaxAmount - 0;
        });
  
        this.form.bizCostItemList = this.bizCostItemList;
        this.$refs["form"].validate((valid) => {
          if (valid) {
            updateCost(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$tab.closePage().then(() => {
                // 执行結束的逻辑
                const obj = { path: "/cost/cost", name: "Cost" };
                this.$tab.refreshPage(obj);
              });
            });
          }
        });
      },
      cancel() {
        this.$tab.closePage().then(() => {
          // 执行結束的逻辑
          const obj = { path: "/cost/cost", name: "Cost" };
          this.$tab.refreshPage(obj);
        });
      },
      // 支出銀行
      open_dialog() {
        this.open = true;
        this.dialog_if = true;
        this.getList();
      },
      getList() {
        // 根据实际需求，调用对应接口...........
        this.loading = true;
        listBank({
          pageNum: 1,
          pageSize: 99999,
          bankType: 20,
        })
          .then((res) => {
            this.userList = res.rows;
            this.total = res.total;
            this.loading = false;
            //   數据回显
            let that = this;
            this.$nextTick(() => {
              console.log(this.multipleSelection);
              if (this.form.costBankNo && this.form.costBankNo != "") {
                this.userList.forEach((row) => {
                  if (row.id == this.select_customer.id) {
                    that.$refs.multipleTable.toggleRowSelection(row);
                  }
                });
              } else {
                that.$refs.multipleTable.clearSelection();
              }
            });
          })
          .catch((err) => {
            console.log(err);
            this.loading = false;
          });
      },
      choose_customer() {
        console.log(1111);
        console.log(this.multipleSelection);
        this.select_customer = this.multipleSelection[0];
        this.form.costBankId = this.multipleSelection[0].id;
        this.form.costBankNo = this.multipleSelection[0].bankNo;
        this.form.costBankName = this.multipleSelection[0].bankName;
        this.form.costBankAccount = this.multipleSelection[0].accountName;
        this.$refs.multipleTable.clearSelection();
        this.open = false;
        this.dialog_if = false;
      },
  
      // 取消按钮
      cancel_customer() {
        this.$refs.multipleTable.clearSelection();
        this.open = false;
      },
      handleSelectionChange(val) {
        if (val.length > 1) {
          this.$refs.multipleTable.clearSelection();
          this.$refs.multipleTable.toggleRowSelection(val.pop());
        }
      },
      selectTable(selection, row) {
        this.multipleSelection = [row];
      },
      // 收款銀行
      open_dialog_to() {
        this.open_to = true;
        this.dialog_if_to = true;
        this.getList_to();
      },
      getList_to() {
        // 根据实际需求，调用对应接口...........
        this.loading = true;
        let bankType = 10;
        switch (this.form.costSource) {
          case "10":
            bankType = 30;
            break;
          case "20":
            bankType = 10;
            break;
          case "30":
            bankType = 40;
            break;
          default:
            break;
        }
        listBank({
          pageNum: 1,
          pageSize: 99999,
          bankType: bankType,
        })
          .then((res) => {
            this.userList_to = res.rows;
            this.total = res.total;
            this.loading = false;
            //   數据回显
            let that = this;
            this.$nextTick(() => {
              console.log(this.multipleSelection_to);
              if (this.form.toBankNo && this.form.toBankNo != "") {
                this.userList_to.forEach((row) => {
                  if (row.id == this.select_customer_to.id) {
                    that.$refs.multipleTable_to.toggleRowSelection(row);
                  }
                });
              } else {
                that.$refs.multipleTable_to.clearSelection();
              }
            });
          })
          .catch((err) => {
            console.log(err);
            this.loading = false;
          });
      },
      choose_customer_to() {
        console.log(1111);
        console.log(this.multipleSelection_to);
        this.select_customer_to = this.multipleSelection_to[0];
        this.form.toBankId = this.multipleSelection_to[0].id;
        this.form.toBankNo = this.multipleSelection_to[0].bankNo;
        this.form.toBankName = this.multipleSelection_to[0].bankName;
        this.form.toBankAccount = this.multipleSelection_to[0].accountName;
        this.$refs.multipleTable_to.clearSelection();
        this.open_to = false;
        this.dialog_if_to = false;
      },
  
      // 取消按钮
      cancel_customer_to() {
        this.$refs.multipleTable_to.clearSelection();
        this.open_to = false;
      },
      handleSelectionChange_to(val) {
        if (val.length > 1) {
          this.$refs.multipleTable_to.clearSelection();
          this.$refs.multipleTable_to.toggleRowSelection(val.pop());
        }
      },
      selectTable_to(selection, row) {
        this.multipleSelection_to = [row];
      },
  
      // 收款銀行
      open_dialog_supplier() {
        this.open_supplier = true;
        this.dialog_if_supplier = true;
        this.getList_supplier();
      },
      getList_supplier() {
        // 根据实际需求，调用对应接口...........
        this.loading = true;
        listSupplier(this.queryParams)
          .then((res) => {
            this.userList_supplier = res.rows;
            this.total = res.total;
            this.loading = false;
            //   數据回显
            let that = this;
            this.$nextTick(() => {
              console.log(this.multipleSelection_supplier);
              if (this.form.supplierCode && this.form.supplierCode != "") {
                this.userList_supplier.forEach((row) => {
                  if (row.id == this.select_customer_supplier.id) {
                    that.$refs.multipleTable_supplier.toggleRowSelection(row);
                  }
                });
              } else {
                that.$refs.multipleTable_supplier.clearSelection();
              }
            });
          })
          .catch((err) => {
            console.log(err);
            this.loading = false;
          });
      },
      choose_customer_supplier() {
        console.log(1111);
        console.log(this.multipleSelection_supplier);
        this.select_customer_supplier = this.multipleSelection_supplier[0];
  
        this.form.supplierId = this.multipleSelection_supplier[0].id;
        this.form.supplierCode = this.multipleSelection_supplier[0].supplierCode;
        this.form.supplierName = this.multipleSelection_supplier[0].supplierName;
  
        this.$refs.multipleTable_supplier.clearSelection();
        this.open_supplier = false;
        this.dialog_if_supplier = false;
      },
  
      // 取消按钮
      cancel_customer_supplier() {
        this.$refs.multipleTable_supplier.clearSelection();
        this.open_supplier = false;
      },
      handleSelectionChange_supplier(val) {
        if (val.length > 1) {
          this.$refs.multipleTable_supplier.clearSelection();
          this.$refs.multipleTable_supplier.toggleRowSelection(val.pop());
        }
      },
      selectTable_supplier(selection, row) {
        this.multipleSelection_supplier = [row];
      },
  
      // 選擇經辦人
      open_dialog_receiverName() {
        this.open_receiverName = true;
        this.dialog_if_receiverName = true;
        this.getList_receiverName();
      },
      getList_receiverName() {
        // 根据实际需求，调用对应接口...........
        this.loading = true;
        listUser({
          pageNum: 1,
          pageSize: 99999,
        })
          .then((res) => {
            this.userList_receiverName = res.rows;
            this.total = res.total;
            this.loading = false;
            //   數据回显
            let that = this;
            this.$nextTick(() => {
              console.log(this.multipleSelection_receiverName);
              if (this.form.operatorName && this.form.operatorName != "") {
                this.userList_receiverName.forEach((row) => {
                  if (row.userId == this.select_customer_receiverName.userId) {
                    that.$refs.multipleTable_receiverName.toggleRowSelection(row);
                  }
                });
              } else {
                that.$refs.multipleTable_receiverName.clearSelection();
              }
            });
          })
          .catch((err) => {
            console.log(err);
            this.loading = false;
          });
      },
      choose_customer_receiverName() {
        console.log(1111);
        console.log(this.multipleSelection_receiverName);
        this.select_customer_receiverName =
          this.multipleSelection_receiverName[0];
  
        this.form.operatorName = this.multipleSelection_receiverName[0].userName;
  
        this.form.operatorId = this.multipleSelection_receiverName[0].userId;
  
        this.$refs.multipleTable_receiverName.clearSelection();
        this.open_receiverName = false;
        this.dialog_if_receiverName = false;
      },
      cancel_customer_receiverName() {
        this.$refs.multipleTable_receiverName.clearSelection();
        this.open_receiverName = false;
      },
      handleSelectionChange_receiverName(val) {
        if (val.length > 1) {
          this.$refs.multipleTable_receiverName.clearSelection();
          this.$refs.multipleTable_receiverName.toggleRowSelection(val.pop());
        }
      },
      selectTable_receiverName(selection, row) {
        this.multipleSelection_receiverName = [row];
      },
      /** 費用明細序號--------------------------------------------------------- */
  
      /** 复选框选中數据 */
      SelectionChange(selection) {
        this.checkedList = selection.map((item) => item.index);
      },
      /** 發票明細序號 */
      rowItemIndex({ row, rowIndex }) {
        row.index = rowIndex + 1;
      },
      /** 發票明細添加按钮操作 */
      handleAddBizInvoiceItem() {
        let obj = {};
        obj.costItem = "";
        obj.costAmount = "";
        obj.taxAmount = "";
        obj.costTaxAmount = "";
        obj.tax = this.form.taxRate;
        obj.quantity = 1;
        obj.uint = "個";
        obj.unitPrice = "";
        obj.remark = "";
        this.bizCostItemList.push(obj);
      },
      /** 發票明細删除按钮操作 */
      handleDeleteBizInvoiceItem() {
        if (this.checkedList.length == 0) {
          this.$modal.msgError("請先選擇要删除的發票明細數据");
        } else {
          const bizCostItemList = this.bizCostItemList;
          const checkedList = this.checkedList;
          this.bizCostItemList = bizCostItemList.filter(function (item) {
            return checkedList.indexOf(item.index) == -1;
          });
        }
      },
      // 計算金額
      amountSum(item) {
        this.bizCostItemList[item.index - 1].tax = this.form.taxRate;
        this.bizCostItemList[item.index - 1].taxAmount = this.computeTaxAmount(
          this.bizCostItemList[item.index - 1].costAmount,
          this.form.taxRate
        );
        this.bizCostItemList[item.index - 1].costTaxAmount =
          this.computecostTaxAmount(
            this.bizCostItemList[item.index - 1].costAmount,
            this.form.taxRate
          );
        this.$forceUpdate();
        this.bizCostItemList.splice(1, 0);
        console.log(this.bizCostItemList);
      },
      computeTaxAmount(costAmount, taxRate) {
        return (costAmount * taxRate).toFixed(2);
      },
      computecostTaxAmount(costAmount, taxRate) {
        return (costAmount * (1 + (taxRate - 0))).toFixed(2);
      },
      // 稅率變化
      taxRate_change() {
        this.bizCostItemList.map((item) => {
          item.tax = this.form.taxRate;
          item.taxAmount = this.computeTaxAmount(
            item.costAmount,
            this.form.taxRate
          );
          item.costTaxAmount = this.computecostTaxAmount(
            item.costAmount,
            this.form.taxRate
          );
        });
        console.log(this.bizCostItemList);
        this.$forceUpdate();
        this.bizCostItemList.splice(1, 0);
      },
    },
  };
  </script>
  <style  >
  .signType thead .el-table-column--selection .cell {
    display: none;
  }
  .dialog-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  </style>
        